<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <h3>子应用 B</h3>
    </div>
    <el-menu
      :default-active="activeIndex"
      class="sidebar-menu"
      @select="handleMenuSelect"
      background-color="#f5f5f5"
      text-color="#333"
      active-text-color="#409eff"
    >
      <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { House, InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 菜单数据
const menuItems = ref([
  {
    index: 'home',
    title: '首页',
    icon: House,
    route: '/',
  },
  {
    index: 'about',
    title: '关于',
    icon: InfoFilled,
    route: '/about',
  },
])

// 当前激活的菜单项
const activeIndex = computed(() => {
  const currentPath = route.path
  if (currentPath === '/') return 'home'
  if (currentPath === '/about') return 'about'
  return 'home'
})

// 菜单点击处理
const handleMenuSelect = (index: string) => {
  const menuItem = menuItems.value.find((item) => item.index === index)
  if (menuItem && menuItem.route !== route.path) {
    router.push(menuItem.route)
  }
}
</script>

<style scoped>
.sidebar {
  width: 250px;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}

.sidebar-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.sidebar-menu {
  flex: 1;
  border: none;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  margin: 0;
  border-radius: 0;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #ecf5ff;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.sidebar-menu .el-menu-item.is-active .el-icon {
  color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
}
</style>
